<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // async function async1() {
        //     console.log('async start'); //2 重要
        //     await async2() // 执行async2 然后再执行await操作
        //     // 因为async2 里没有返回值，所以返回undefined，所以await 没有执行

        //     // await后面，无论多少行。都可以看作是 callback里的内容，即异步


        //     // 类似于event loop，setTimeout(cb1)
        //     // 类似于执行setTimeout(function(){console.log('async1 end')})
        //     // 或者执行 Promise.resolve().then(()=>{console.log('async1 end')})

        //     console.log('async1 end');// 5
        //     // 异步代码
        // }
        // async function async2() {
        //     console.log('async2'); // 3 重要
        // }
        // console.log('script start');// 1
        // async1() // 执行async1 还没有到异步的情况，要立马执行
        // console.log('script end'); //4 
        // // 到此，同步代码执行完毕，


        // /*
        //     结果：
        //     script start
        //     async start
        //     async2
        //     script end
        //     async1 end
        // */



        // 难度升级
        async function async1() {
            console.log('async start');
            await async2();
            // 下面三行都是异步回调的内容
            console.log('async1 end');
            await async3();
            // 下面一行是异步回调的内容
            console.log('async1 end 2');
        }
        async function async2() {
            console.log('async2');
        }

        async function async3() {
            console.log('async3');
        }

        console.log('script start');
        async1();
        console.log('script end');

        // 结果
        // 1.script start 2.async start 3.async2 4.script end 5.async1 end 6.async3 7.async1 end 2
    </script>
</body>

</html>